<form method="post" enctype="multipart/form-data">
    <div id="div_id_file_field" class="form-group"> 
        <label for="id_file_field" class=" requiredField"> File field
            <span class="asteriskField">*</span> 
        </label>
        <div class=" mb-2">
            <div class="form-control custom-file" style="border:0">
                <input type="file" name="file_field" class="custom-file-input" id="id_file_field" required>
                <label class="custom-file-label text-truncate" for="id_file_field">---</label>
                <script type="text/javascript" id="script-id_file_field">
                    document.getElementById("script-id_file_field").parentNode.querySelector('.custom-file-input').onchange =  function (e){                var filenames = "";                for (let i=0;i<e.target.files.length;i++){                    filenames+=(i>0?", ":"")+e.target.files[i].name;                }                e.target.parentNode.querySelector('.custom-file-label').textContent=filenames;                }                
                </script>
            </div>
        </div>
    </div>
</form>
